﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true"
    CodeBehind="Index.aspx.cs" Inherits="MvcAjax.Views.Home.Index" %>

<%@ Register Assembly="Developmentalmadness.Web.UI.ExtJsControlLibrary" Namespace="Developmentalmadness.Web.UI.ExtJsControlLibrary"
    TagPrefix="js" %>
<asp:Content ContentPlaceHolderID="headerContent" runat="server">

    <script type="text/javascript">
    function alertCollapse(p, animate){
            Ext.Msg.show({
               title:'Collapse fired',
               msg: 'You are collapsing a panel. Would you like to continue?',
               buttons: Ext.Msg.YESNOCANCEL,
               icon: Ext.MessageBox.QUESTION
            });
    }
    </script>

</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <h2>Using AJAX Server controls with an ASP.NET MVC Application!</h2>
    
    <js:ExtJsScriptManager ID="ScriptManager1" runat="server" />
    
    <js:ExtJsPanel ID="myPanel" title="My Header" width="30em" autoHeight="true"
        collapsible="true" runat="server" renderTo="myPanel">
        <ClientEvents>
            <js:ClientEvent name="beforecollapse" action="alertCollapse" />
        </ClientEvents>
        <Body>
            <js:ExtJsToolbar ID="myToolbar" width="10em" autoHeight="true" renderTo="myToolbar" runat="server">
                <items>
                    <js:ExtJsButton ID="myButton" runat="server" text="A Menu Button" >
                        <menu ID="buttonMenu1" runat="server">
                            <items>
                                <js:ExtJsMenuTextItem ID="txt3" runat="server" text="Text 3" />
                                <js:ExtJsMenuSeparator ID="separator2" runat="server" />
                                <js:ExtJsMenuTextItem ID="txt4" runat="server" text="Text 4" />
                                <js:ExtJsDateMenu ID="date1" runat="server" text="Choose Date" />
                                <js:ExtJsColorMenu ID="color2" runat="server" text="Choose Color" />                   
                            </items>
                        </menu>
                    </js:ExtJsButton>
                    <js:ExtJsSplitButton ID="split1" runat="server" text="A Split Button">
                        <menu ID="splitMenu1" runat="server">
                            <items>
                                <js:ExtJsMenuTextItem ID="txt5" runat="server" text="Text 5" />
                                <js:ExtJsColorMenu ID="color3" runat="server" text="Choose Color" />
                            </items>
                        </menu>
                    </js:ExtJsSplitButton>
                </items>
            </js:ExtJsToolbar>
            
            Wassap!
            
            <js:ExtJsPanel runat="server" ID="mysubPanel" title="my sub panel"
                width="10em" collapsible="true" html="my sub content" renderTo="mysubPanel">
            </js:ExtJsPanel>
        </Body>
    </js:ExtJsPanel>
    
</asp:Content>
